<template>
    <div>
        <form class="sign-in">
            <div class="telephoneBox">
                <span class="icon_phone"><i class="fa fa-mobile"></i></span>
                <input type="text" class="telephone" placeholder="手机号" v-model="telephone.value">
                <transition name="form-tooltip">
                    <form-tooltip v-show="telephone.flag" :rules="telephone" ref="telephone"></form-tooltip>
                </transition>
            </div>
            <div class="passwordBox">
                <span><i class="fa fa-lock"></i></span>
                <input type="password" class="password" placeholder="密码" v-model="password.value">
                <span class="icon-eye" @click="peep"><i class="fa fa-eye"></i></span>
                <transition name="form-tooltip">
                    <form-tooltip v-show="password.flag" :rules="password" ref="password"></form-tooltip>
                </transition>
            </div>
            <button type="button" @click="commit" ref="btn">登录</button>
        </form>
    </div>
</template>

<script>
    import formTooltip from '@/components/tool/form-tooltip'
    import {Toast} from 'mint-ui'
    import { Indicator } from 'mint-ui';
    export default {
        data(){
            return {
                telephone : {
                    value: '',
                    pattern : /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                    message : {
                        blank : '手机号不能为空!',
                        illegal : '手机号格式不正确!'
                    },
                    flag : false,
                    target : 'telephoneBox',
                    checked : false
                },
                password : {
                    value: '',
                    //必须包含字母和数字
                    pattern : /^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{6,12}$/,
                    message : {
                        blank : '密码不能为空!',
                        illegal : '密码格式不正确,需要是6-12个字符,必须包含英文和数字,不能含有空格和其他特殊符号!'
                    },
                    flag : false,
                    target : 'passwordBox',
                    checked : false
                }
            }
        },
        methods : {
            peep(){
                var i = document.querySelector('.icon-eye i')
                i.classList.toggle('fa-eye-slash')
                i.classList.toggle('fa-eye')
                if(i.classList.contains('fa-eye'))
                    document.querySelector('.password').type = 'password'
                else
                    document.querySelector('.password').type = 'text'
            },
            commit(){
                var list = ['telephone','password']
                for(var i = 0; i < list.length; ++i){
                    if(!this[list[i]].checked){
                        this[list[i]].flag = true
                        this.$refs[list[i]].message = this[list[i]].message.blank
                        return
                    }
                    if(this[list[i]].flag) return
                }
//                this.$store.commit('setLoading',true)
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'fading-circle'
                });
                this.$http.post('/api/login',{
                    params : {
                        telephone : this.telephone.value,
                        password : this.password.value
                    }
                }).then(function(res){
//                    this.$store.commit('setLoading',false)
                    Indicator.close();
                    this.$refs.btn.disabled = true
                    var result = res.data
                    var timer = setTimeout(() => {
                        clearTimeout(timer)
                        if(result.status === -1 || result.status === 1)
                            this.$refs.btn.disabled = false
                        else{
                            this.$router.push({path : '/home'})
                        }
                    },1500)
                    if(result.status === -1)
                        return Toast({
                            message: '出错啦!',
                            iconClass: 'fa fa-close',
                            duration : 1500
                        });
                    if(result.status === 1)
                        return Toast({
                            message: '账号或密码不存在!',
                            iconClass: 'fa fa-close',
                            duration : 1500
                        });
                    if(result.status === 0){
                        this.$store.commit('setUser',result.user)
                        Toast({
                            message: '登录成功!',
                            iconClass: 'fa fa-check',
                            duration : 1500
                        });
                        return
                    }
                },function(err){
//                    this.$store.commit('setLoading',false)
                    Indicator.close();
                })
            }
        },
        components : {
            formTooltip
        }
    }
</script>

<style scoped lang="less">
    .sign-in{
        width:100%;
        div{
            position: relative;
            span{
                position: absolute;
                left:14px;
                line-height:50px;
                font-size:20px;
                color:#969696;
                &.icon_phone{
                     font-size:28px;
                 }
                &.icon-eye{
                     top:0;
                     left:260px;
                 }
            }
        }
        input{
            &.telephone{
                 border-top: 1px solid #c8c8c8;
                 border-top-left-radius: 4px;
                 border-top-right-radius: 4px;
             }
            &.password{
                 border-bottom-left-radius: 4px;
                 border-bottom-right-radius: 4px;
             }
        }

        button{
            background: #3194d0;
        }
    }
</style>
